<template>
  <view>
    <view class="info flex">
      签约商家
      <view>
        <image
          src="../../../static/images/shop.png"
          style="width: 120rpx; margin-left: 10rpx"
          mode="widthFix"
        >
        </image>
      </view>
    </view>

    <view>
      <view class="health">
        <view class="title">
          <image
            style="width: 84rpx; height: 84rpx; margin: 0 20rpx"
            src="../../../static/icon/health.png"
            mode="heightFix"
          >
          </image>
          <view>
            <view>签约商家</view>
            <view class="subtitle">{{ shopInfo.shop_name }}</view>
          </view>
        </view>
      </view>
      <view class="health">
        <view class="title">
          <image
            style="width: 84rpx; height: 84rpx; margin: 0 20rpx"
            src="../../../static/icon/health.png"
            mode="heightFix"
          >
          </image>
          <view>
            <view>店长实名认证通过</view>
            <view class="subtitle">身份证{{ shopInfo.shop_idnum }}</view>
          </view>
        </view>
        <view class="subtitle" style="border-top: 1px solid #eaeeef">
          * 所有理疗师签约入驻平台时，身份信息均已通过核检
        </view>
      </view>

      <view class="bg">
        <view class="title">该店铺已在平台完成市场主体登记认证</view>
        <view class="subtitle"
          >根据相关法律法规要求，经营者相关资质信息公示如下</view
        >
      </view>

      <view class="content">
        <view class="license">
          <view class="title">营业执照</view>
          <view style="position: relative" v-if="shopInfo.shop_pic">
			  <!-- <view></view> -->
            <image
              :src="shopInfo.shop_pic"
              style="width: 100%;height: 350rpx;"
            />
            <!-- <image
              src=""
              style="height: 380rpx; width: 100%; position: absolute; top: 0"
              mode=""
            ></image> -->
			<view class="diaochan">貂蝉到家平台使用</view>
            <!-- <wm-watermark :text="name"></wm-watermark> -->
          </view>
        </view>

        <view class="certificate">
          <view class="title">资质认证</view>
          <view style="position: relative" v-if="shopInfo.tech_pic">
		  <!-- <view style="position: relative"> -->
            <image
              :src="shopInfo.tech_pic"
              style="width: 100%;height: 300rpx;filter: blur(0.5px);"
            />
			<!-- <view class="idCard"></view> -->
			<!-- <view class="qr"></view> -->
			<!-- <view class="diaochan">貂蝉到家平台使用</view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";
export default {
  components: {
    wmWatermark,
  },
  data() {
    return {
      watermark: "",
      id: 0,
      certificates: "",
      healthy: "",
      qualifications: "",
      name: "貂蝉到家",
      technician_healthy: {},
      license: "",
      shopInfo: {},
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getShopInfo();
  },
  onShow() {
    this.watermark = this.$base.platformName;
    this.init();
  },
  methods: {
    async init() {
      let data = await this.$http.post("api/technician/details", {
        id: this.id,
      });
      for (let i in data.technician) {
        this[i] = data.technician[i];
      }
    },
    async getShopInfo() {
		console.log("this.id", this.id);
      const res = await this.$http.post(
        "api/technician/shop_info?techid=" + this.id,
        null,
        "GET"
      );
      // console.log('res-->',res);
      this.shopInfo = res;
    },
  },
};
</script>

<style lang="scss">
.info {
  width: 85%;
  margin: 20rpx auto;
}

.infoImg {
  width: 85%;
  text-align: center;
  margin: 20rpx auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 10rpx;
}

.text {
  margin: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #797979;
}

.health {
  margin-top: 20rpx;
  background-color: #fff;
  width: 100%;
  padding: 30rpx;
  border-radius: 30rpx;

  .title {
    display: flex;
    align-items: center;
    .subtitle {
      color: #a5a5a5;
      font-size: 26rpx;
    }
  }

  .subtitle {
    padding: 20rpx 0rpx;
    color: #26adf1;
    display: flex;
    align-items: center;
    font-size: 28rpx;
  }
}

.bg {
  margin-top: 20rpx;
  border-radius: 30rpx;
  background: linear-gradient(90deg, #ebf6ff 50%, #fff 100%);
  padding: 30rpx 20rpx;

  .title {
    margin-bottom: 10rpx;
  }

  .subtitle {
    color: #a5a5a5;
    font-size: 26rpx;
  }
}

.content {
  padding: 30rpx;

  .license,
  .certificate {
    background-color: #fff;
    text-align: center;
    margin: 20rpx auto;
    border-radius: 16rpx;
    padding: 20rpx;
    .title {
      margin: 10rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #797979;
    }
  }
}
.diaochan{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -30%); /* 同时平移X和Y轴 */
	font-size: 66rpx;
	font-weight: bold;
	// color: #38987c;
	color: rgba(55,152, 124, 0.7);
	width: 100%; /* 或固定宽度，如300rpx */
	text-align: center; /* 文本水平居中 */
}
.idCard{
	width: 40rpx;
	height: 35rpx;
	position: absolute;
	left: 45%;
	top: 51%;
	transform: translate(-50%); /* 同时平移X和Y轴 */
	background-color: #bec3c7;
}
.qr{
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	right: 15%;
	bottom: 12%;
	background-color: #bec3c7;
}
</style>
